import { defineStore } from 'pinia'
import { Component } from 'vue'
import { mainSysBars, footerSysBars } from './data/defSysBars'
import sysTabs from './data/defSysTabs'
import $events from '@events'

export type TabObject = {
    name: string, 
    route: string,
    args: object|null,
    title: string, 
    icon: string,
    component : Component|null
}

export type SysBar = {
    name : string,
    icon: string,
    logo: string,
    tip: string,
    type: string,
    menuData: any,
    // menuCom: Component
}

type State = {
    readonly ver: string,
    test: string,
    tabs: TabObject[],
    bars: SysBar[], 
    fbars: SysBar[],
    activeTab: string,
    activeBar: string,
    mainMenuWidth: string
}

export const useLayoutStore = defineStore('layouts', {
    state: ():State => ({
        ver: "1.0.0",
        test: 'xxx',
        tabs: sysTabs,
        bars: [], //mainSysBars,
        fbars: footerSysBars,
        activeTab: sysTabs[0] ? sysTabs[0].name : '',
        activeBar: 'none',
        mainMenuWidth: '260px'
    }),
    getters: {
        getTxt(){
            return this.test
        },
        getSysBars(){
            if( !this.bars.length ){
                window.exchanger.putInvoke('get-sys-bars-list')
                    .then( (list: Array<any>) => {
                        list.forEach( (bar: Object, i) => {
                            bar.menuData = []
                            this.bars.push( bar )
                            if( this.activeBar === 'none' && i==0){
                                this.activeBar = bar.name
                            }
                        })
                    })
            }
            return this.bars
        },
        getActiveTab(){
            return this.activeTab
        },
        getActiveTabVo(){
            return this.tabs.find( (tab: TabObject)=> tab.name === this.activeTab)
        },
        getSysTabs(){
            return this.tabs
        },
        getmainMenuWidth(){
            return this.mainMenuWidth 
        },
        getActiveSysBar(): SysBar|null {
            const active = this.bars?.find( (bar:SysBar) => bar.name === this.activeBar)
            return active
        },
        getFooterSysBars(){
            return this.fbars
        }
    },
    actions: {
        setTest(v: string){
            this.test = v
        },
        setMenuWidth(w: string){
            this.mainMenuWidth = w
        }, 
        setAcitveBar(name: string){
            this.activeBar = name
            $events.$emit('sys-bar-active-changed', this.activeBar)
        },
        appendTab( tab: TabObject ){
            this.tabs.push( tab )
        },
        setActiveTab( name: string){
            this.activeTab = name
            $events.$emit('sys-tab-active-changed', this.getActiveTab, this.getActiveTabVo)
        },
        updateActiveTab( params: object | string ){
            const vo = this.getActiveTabVo
            if( params instanceof String){ 
                vo.route = params
            }else if(params instanceof Object){
                for(let key in params){
                    vo[key] = params[key]
                }
            }
            $events.$emit('sys-tab-active-updated', this.getActiveTab, this.getActiveTabVo)
        },
        closeTab( name: string ){
            let find = -1
            let last = -1
            this.tabs.some((tab:TabObject, i:number)=>{
                if(tab.name===name){
                    find = i
                    return true
                }else{ 
                    last = i
                }
            })
            if(find>=0){
                this.tabs.splice(find, 1)
                let finded = this.tabs.find((tab:TabObject)=> tab.name === this.activeTab)
                if( !finded ){
                    if(last>0) 
                        this.setActiveTab(this.tabs[last].name)
                    else
                        this.tabs[0] && this.setActiveTab(this.tabs[0].name)
                }
            }
            // const index = this.tabs.findIndex( (tab:TabObject) => tab.name === name )
            // if(index>=0){
            //     this.tabs.splice(index, 1)
            // }
        }
    },
  })
  